import React, { useEffect } from "react";
import { Layout, theme } from "antd";
import { Outlet } from "react-router-dom";
import LayoutHeader from "./head";
import { useAppDispatch } from "@/store";
import { get_dict_info, get_user_menus } from "@/store/slice/app";
import ProBreadcrumb from "./ProBreadcrumb";

const { Content } = Layout;

const App: React.FC = () => {
  const dispatch = useAppDispatch();
  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken();

  useEffect(() => {
    dispatch(get_user_menus());
    dispatch(get_dict_info(["sys_menu_type", "sys_status", "sys_sex"]));
  }, []);

  return (
    <Layout className="layout">
      <LayoutHeader />
      <Content style={{ padding: "0 48px" }}>
        <ProBreadcrumb />
        <div
          style={{
            background: colorBgContainer,
            minHeight: "calc(100vh - 132px)",
            padding: 24,
            borderRadius: borderRadiusLG,
          }}
        >
          <Outlet />
        </div>
      </Content>
    </Layout>
  );
};

export default App;
